<template>
  <div>
    <div class="index-header">
      <div class="index-img"><img src="https://m.wowdsgn.com/static/img/titleView.png" ></div>
      <searchInput></searchInput>
    </div>
    <div class="index-tab">
      <router-link to="/index" tag="div" active-class="index-active">推荐</router-link>
      <router-link to='/index/qualityspace' tag="div" active-class="index-active">品质空间</router-link>
      <router-link to='/index/homegoods' tag="div" active-class="index-active">居家好物</router-link>
    </div>
    <router-view></router-view>
    <div class="recommend">
      <swiper>
        <van-swipe-item v-for="item in $store.state.list" :key="item.id" class="active-planting">
          <img :src="item.bannerImgSrc" alt="" id="img">
        </van-swipe-item>
      </swiper>
      <recommend></recommend>
    </div>
  </div>
</template>

<script>
import searchInput from '@/components/searchInput'
import swiper from '@/components/swiper'
import recommend from '@/views/index/recommend'

export default {
  components: {
    searchInput,
    swiper,
    recommend
  },
  mounted () {
    this.$store.dispatch('getdata')
    this.$store.dispatch('twogetdata')
    this.$store.dispatch('threegetdata')
    this.$store.dispatch('fourgetdata')
    this.$store.dispatch('fivegetdata')
    this.$store.dispatch('sixgetdata')
    this.$store.dispatch('sevengetdata')
  }
}
</script>

<style lang="scss" scoped>
  .index-header{
    padding: 0 10px;
    .index-img{
      width: 65px;
      height: 44px;
      display: inline-block;
      position: static;
      img{
        width: 65px;
        position: relative;
        top: 2px
      }
    }
  }
  .index-tab{
    height: 40px;
    div{
      float: left;
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      color: #808080;
      margin: 0 21.5px;
      font-size: 14px;
      padding: 0 11px;
    }
  }
    .recommend{
      background: #F5F5F5;
    }
    .active-planting{
      width: 100%;
      height: 360px;
    }
    #img{
      width: 100%;
    }
</style>
